<!--
 * @Author: your name
 * @Date: 2021-09-08 18:52:22
 * @LastEditTime: 2021-11-29 14:49:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \xbsg-wx\pages\materials\index.vue
-->
<template>
	<view class="content">
		<view class="" style="margin: 0 20rpx;"  v-for="(item,index) in menuData" :key="index" v-if="item.look">
			<view class="information">
				{{item.menuName}}
			</view>
			<view class="duild_meus">
				<view  v-for="(item1,index1) in item.children" :key="index1" v-if="item1.look" class="bed_item" hover-class="button-hover" @click="goBuildList(item1)">
					<image :src="item1.iconPath" class="icon_radius" :style="{backgroundColor:item1.bgColor}"></image>
					<text>
						{{item1.menuName}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuData:[]
			};
		},
		onLoad(option) {
			// 接收参数
			this.menuData = this.$store.state.com.routerData
		},
		methods: {
			goBuildList(item) {
				uni.navigateTo({
					url: item.router
				})
				
					wx.setStorageSync(
					       'history',          
					       {
							acount: item.clParams,
					       }
					     )
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.information{
		margin-top: 20rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #888888;
				border-bottom: 1rpx solid rgba($color: #F6F6F6, $alpha: 1.0);
				padding:20rpx 0 20rpx 40rpx;
				box-sizing: border-box;
			border-top-right-radius: 12rpx;
			border-top-left-radius:12rpx ;
	background: #FFFFFF;
	}
	.duild_meus{
		display: flex;
		justify-content: flex-start;
		box-sizing: border-box;
		flex-wrap: wrap;
		background: #FFFFFF;
		// box-shadow: 0px 2px 6px rgba($color: $uni-line-shadow, $alpha: 0.7);
			border-bottom-right-radius: 12rpx;
			border-bottom-left-radius:12rpx ;
		.bed_item {
			width: 33%;
			border-right: 1rpx solid rgba($color: #F6F6F6, $alpha: 1.0);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding:50rpx 0;
		
			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
		
			text {
				font-size: 26rpx;
				color: #000000;
			}
		}
	}
	
	.maintenance_meus{
		display: flex;
		justify-content: flex-start;
		.main_item{
			width: 33%;
		}
	}
}
</style>
